var coupons = document.querySelector(".coupons");
document.querySelector("span.coupon").onclick = function() {
	if(coupons.classList.contains("show")) return;
	this.previousElementSibling.innerText = "优惠卷码";
	this.style.fontSize = "0px";
	coupons.classList.add("show");
}
document.querySelector("div.coupons>button").onclick = function() {
	coupons.classList.remove("show");
	document.querySelector("span.coupon").previousElementSibling.innerText = "暂无可用优惠券";
	document.querySelector("span.coupon").style.fontSize = "16px";
}
document.querySelector(".order-phone>input").value = 13954997888;
var arr = [
	{
		id: 85,
		name: "张三",
		mobile: 13954992281,
		tel: 22278,
		address: "山东省 潍坊市 寿光市 圣城街道",
		close: "山东省 潍坊市 寿光市 圣城街道 光明道路"
	},
	{
		id: 48,
		name: "李四",
		mobile: 15866974588,
		tel: 22255,
		address: "山东省 临沂市 费县 费城街道",
		close: "山东省 临沂市 费县 费城街道 长寿路"
	},
	],
	form = document.forms.abc,
	list = document.querySelector("div.order-adress>div"),
	htmlStr = "";
// 动态渲染网页(将用户输入的内容渲染到网页上)
arr.forEach(function(item,i) {
	htmlStr +=
		`
			<div>
				<h5>${item.name}</h5>
				<span>${item.mobile}</span>	
				<p>${item.close}</p>
				<button data-id="${item.id}"  class="btn-update">修改</button>
				<button data-id="${item.id}" class="btn-delete">删除</button>
			</div>	
		`;
})
list.innerHTML = htmlStr;
// 页面上的新建页面
var addBtn = document.querySelector("button.btn-add"),
	form = document.forms["abc"],
	dialog = document.querySelector("div.dialog");
addBtn.onclick = function() {
	form.index.value = -1;
	dialog.classList.add("active");
	form.reset();
}
// form表单的取消按钮
var cencelBtn = document.querySelector("button.btn-cencel");
cencelBtn.onclick = function() {
	dialog.classList.remove("active");
}
// 删除按钮的实现
list.onclick = function(e) {
	if(e.target.classList.contains("btn-delete")) {
		// 询问用户是否删除
		if (!confirm("真的要删除吗")) return;
		// 通过藏得id值去寻找下标
		var id = parseInt(e.target.dataset.id);
		var i = arr.findIndex(function(item) {
			return item.id === id;
		})
		// 删除数组中的数据
		arr.splice(i,1);
		// 删除页面上的div
		e.target.parentNode.remove();
		// 提示用户删除成功
		alert("删除成功..")
	}
	if(e.target.classList.contains("btn-update")) {
		var id = parseInt(e.target.dataset.id)
		var i = arr.findIndex(function(item) {
			return item.id === id
		})
		form.index.value = id,
		form.name.value = arr[i].name,
		form.mobile.value = arr[i].mobile,
		form.tel.value = `0536-${arr[i].tel}`,
		regionPicker.set(arr[i].address),
		form.close.value = arr[i].close
		dialog.classList.add("active");
	}
}
// 确定按钮的实现
var btnSave = document.querySelector("button.btn-save");
btnSave.onclick = function() {
	// 取出value查找是修改还是新建
	var id = parseInt(form.index.value)
	if(id === -1) {
		// 收集表单里的内容
		var newItem = {
			id: arr.length === 0 ? 1 : arr[arr.length - 1].id + 1,
			name: form.name.value,
			mobile: parseInt(form.mobile.value),
			tel: parseInt(form.tel.value),
			address: regionPicker.get(),
			close: form.close.value
		},
		// 创建一个新的div 
			newDiv = document.createElement("div");
		// 给新的div加入内容
		newDiv.innerHTML = 
			`
				<div>
					<h5>${newItem.name}</h5>
					<span>${newItem.mobile}</span>
					<p>${newItem.close}</p>
					<button data-id="${newItem.id}" class="btn-update">修改</button>
					<button data-id="${newItem.id}" class="btn-delete">删除</button>
				</div>
			`;
		// 添加进数组里 
		arr.push(newItem)
		// 渲染到页面上 
		list.appendChild(newDiv);
		dialog.classList.remove("active");
	} else {
		// 收集表单里的内容
		var newItem = {
			id: id,
			name: form.name.value,
			mobile: parseInt(form.mobile.value),
			tel: parseInt(form.tel.value),
			address: regionPicker.get(),
			close: form.close.value
		},
		// 创建一个新的div 
		newDiv = document.createElement("div");
		// 给新的div加入内容
		newDiv.innerHTML = `
			<div>
				<h5>${newItem.name}</h5>
				<span>${newItem.mobile}</span>	
				<span>0536-${newItem.tel}</span>
				<span>${newItem.address}</span>
				<p>${newItem.close}</p>
				<button data-id="${newItem.id}" class="btn-update">修改</button>
				<button data-id="${newItem.id}" class="btn-delete">删除</button>
			</div>
		`;
		var i = arr.findIndex(function(item) {
			return item.id === id;
		})
		// 修改数组里的内容 
		arr.splice(i,1,newItem);
		// 修改页面上的内容
		list.children[i].replaceWith(newDiv);
		// 重置表单内容
		form.reset();
		// 关闭表单
		dialog.classList.remove("active");
	}
}
document.querySelector(".order-button-wrapper>button").onclick = function() {
	window.location.href = "pay/pay.html";
}
document.querySelector(".order-container-title>button").onclick = function() {
	window.location.href = "cart/cart.html";
}